<template>
  <div style="width: 100%; height: 100%;">
    <!-- 播放器 播放远程媒体流 -->
    <div style="height: 100%; background-color: #2C3E50;">
      <div style="width: 100%; height: 10%; display: flex; flex-direction: row; justify-content: space-around; align-items: center;">
        <span style="color: white;">
          {{cname}}<br/>(在线人数：{{number}})
        </span>
        <el-button type="danger">退出直播间</el-button>
      </div>

      <!-- 播放器 -->
      <video ref="remoteVideo" class="video_cls" autoplay="autoplay" controls="controls"></video>

      <!-- 聊天框 -->
      <div ref="im_div" style="width: 100%; height: 30%; background-color: white; text-align: left;">
      </div>

      <!-- 输入框 -->
      <div style="width: 100%; height: 10%; display: flex; flex-direction: row; justify-content: space-around; align-items: center;">
        <el-input placeholder="输入需要发送的内容" style="width: 70%;"/> <el-button type="success">发送</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import kurentoUtils from 'kurento-utils'

  export default{
    data(){
      return {
        cid: this.$route.params.cid,
        cname: "课程名称",
        token: this.$route.params.token,
        //直播间的观看人数
        number: 0,
        //远程连接KMS的对象
        webRtcPeer: null
      }
    },
    methods:{
      //信令服务器连接成功后的方法
      wsOpenHandler(){
        //注册的动作，将观看者的信息和课程信息，注册到信令服务器上，课程号就是房间号
        var registerMsg = {
          action: "register",//注册的消息
          role: "slave",//slave代表观看者
          cid: this.cid,//直播的课程id
          token: this.token//接收小程序的身份信息
        };
        //发送给信令服务器
        this.$.sendMsg(registerMsg);
      },
      //信令服务器发送消息的回调方法
      wsMsgHandler(msg){
        switch(msg.action) {
          case "registerSucc":
            //观看者注册成功
            this.cname = msg.msg;
            this.showInfo2Div("系统","成功连接聊天服务器...", "red");

            //立刻连接KMS服务器
            this.connKMSServer();
            break;
          case "number":
            //更新直播间在线人数
            this.number = msg.msg;
            break;
          case "roomInfoError":
            this.showInfo2Div("系统", "房间信息有误....", "red");
            break;
          case "answerSdp":
            this.webRtcPeer.processAnswer(msg.msg);
            break;
          case "iceCandidate":
            this.webRtcPeer.addIceCandidate(msg.msg);
            break;
        }
      },
      //将指定的文本展示到聊天框中
      showInfo2Div(source, content, color){
        var text = "<div style='color: " + (color ? color : 'black') + "'>【" + source + "】:" + content + "</div>";
        this.$refs.im_div.innerHTML += text;
      },
      //连接KMS服务器
      connKMSServer(){
        //准备相关参数
        var option = {
          //本地的video标签对象，用来播放Kurento服务器上的媒体流
          remoteVideo: this.$refs.remoteVideo,
          //stun服务器地址
          configuration: {
            iceServers: [
              {
                urls: "stun:110.41.133.47:3478"
              },{
                urls: "turn:110.41.133.47:3478",
                username: "kurento",
                credential: "kurento"
              }
            ]
          }
        };

        //创建kurento的RTC连接，观看者
        this.webRtcPeer = new kurentoUtils.WebRtcPeer.WebRtcPeerRecvonly(option, (error) => {
            //回调方法
            if(error) {
              //存在异常
              return console.error(error);
            }

            //成功，创建提案
            this.webRtcPeer.generateOffer(this.onOfferViewer);
        });
      },
      //创建观看者提案的方法
      onOfferViewer(error, offerSdp){
        if(error){
        	//提案创建有问题
        	return console.error(error);
        }

        //提案创建成功，将提案发送给信令服务器
        var offerMsg = {
        	action: "offerSdp",
        	role: "slave",
          cid: this.cid,
          token: this.token,
        	msg: offerSdp
        }
        //将直播方的提案信息，发送给信令服务器，由信令服务器转发给KMS服务器
        this.$.sendMsg(offerMsg);
      }
    },
    mounted(){
      //连接信令服务器
      this.$.wsInit({
        onopen: this.wsOpenHandler,
        onmessage: this.wsMsgHandler
      });
    }
  }
</script>

<style scoped="scoped">
  .video_cls {
    display:block;
    width:100%;
    height:50%;
    margin:auto;
    font-size:24px;
    object-fit: fill;
  }
</style>
